<template>
  <div class="page-component">
    <h2>网站指南</h2>
    <p>本节将介绍如何在项目中使用 Element。</p>
    <!--<div class="mavonEditor">-->
      <!--<no-ssr>-->
        <!--<mavon-editor-->
          <!--v-model="handbook"-->
          <!--:defaultOpen="defaultOpen"-->
          <!--:subfield="subfield"-->
          <!--:toolbarsFlag="toolbarsFlag"-->
          <!--:previewBackground="previewBackground"-->
          <!--:editable=false-->
          <!--:scrollStyle=false-->
          <!--:boxShadow=false-->
        <!--/>-->
      <!--</no-ssr>-->
    <!--</div>-->

  </div>


</template>

<script>
  // import Hljs from 'highlight.js'
  // import 'highlight.js/styles/color-brewer.css'
  // Hljs.initHighlightingOnLoad()
  export default {
    name: 'index_page',
    data () {
      return {
        code1: '{\n' +
          '  "presets": [["es2015", { "modules": false }]],\n' +
          '  "plugins": [\n' +
          '    [\n' +
          '      "component",\n' +
          '      {\n' +
          '        "libraryName": "element-ui",\n' +
          '        "styleLibraryName": "theme-chalk"\n' +
          '      }\n' +
          '    ]\n' +
          '  ]\n' +
          '}',
        code: 'import Vue from \'vue\';\n' +
          'import ElementUI from \'element-ui\';\n' +
          'import \'element-ui/lib/theme-chalk/index.css\';\n' +
          'import App from \'./App.vue\';\n' +
          '\n' +
          'Vue.use(ElementUI);\n' +
          '\n' +
          'new Vue({\n' +
          '  el: \'#app\',\n' +
          '  render: h => h(App)\n' +
          '});',
        htmltext: '<el-header height="80px">\n' +
          '  <el-row>\n' +
          '    <el-col :span="2" class="bg-purple-dark"></el-col>\n' +
          '    <el-col :span="20" class="header_boder_down">\n' +
          '    </el-col>\n' +
          '    <el-col :span="2" class="bg-purple-dark"></el-col>\n' +
          '  </el-row>\n' +
          '</el-header>',
        toolbarsFlag: true,
        previewBackground: '#ffffff',
        subfield: false,
        defaultOpen: 'preview',
        toolbars: {
          bold: true, // 粗体
          italic: true, // 斜体
          header: true, // 标题
          underline: true, // 下划线
          strikethrough: true, // 中划线
          mark: true, // 标记
          superscript: true, // 上角标
          subscript: true, // 下角标
          quote: true, // 引用
          ol: true, // 有序列表
          ul: true, // 无序列表
          link: true, // 链接
          imagelink: true, // 图片链接
          code: true, // code
          table: true, // 表格
          fullscreen: true, // 全屏编辑
          readmodel: true, // 沉浸式阅读
          htmlcode: true, // 展示html源码
          help: true, // 帮助
          /* 1.3.5 */
          undo: true, // 上一步
          redo: true, // 下一步
          trash: true, // 清空
          save: true, // 保存（触发events中的save事件）
          /* 1.4.2 */
          navigation: true, // 导航目录
          /* 2.1.8 */
          alignleft: true, // 左对齐
          aligncenter: true, // 居中
          alignright: true, // 右对齐
          /* 2.2.1 */
          subfield: true, // 单双栏模式
          preview: true, // 预览
        },
        handbook: '```html\n' +
          '<el-header height="80px">\n' +
          '  <el-row>\n' +
          '    <el-col :span="2" class="bg-purple-dark"></el-col>\n' +
          '    <el-col :span="20" class="header_boder_down">\n' +
          '    </el-col>\n' +
          '    <el-col :span="2" class="bg-purple-dark"></el-col>\n' +
          '  </el-row>\n' +
          '</el-header>\n' +
          '```'
      }
    }
  }
</script>

<style scoped>
  /*.mavonEditor {*/
  /*width: 100%;*/
  /*height: 100%;*/
  /*!*background-color: #;*!*/
  /*}*/
</style>
